//colors
$colors:("primary":#db9e3f,
  "info":#4b67af,
  "danger": #791a15,
  "blue-1": #1f3695,
  "blue": #4394e4,
  "white": #fff,
  "white-1": #fcfcfc,
  "white-2": #eceef0,
  "light":#f9f9f9,
  "light-1":#d4d9de,
  "light-2":#ededed,
  "grey":#999,
  "grey-2":#f1f1f1,
  "grey-1":#666,
  "dark":#222,
  "dark-1":#343440,
  "black":#000000,
  "title":#4394e4);

$border-color:map-get($colors, light-1);
//text

//font-siza
$font-sizes:(xxs:.08rem, xs:.1rem,
  sm:.12rem,
  md:.13rem,
  lg:.14rem,
  xl:.16rem,
);

a {
  color: #999
}

p {
  line-height: .24rem;
  margin: .16rem 0;
}


.text-ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//width,height
.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

//flex
.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column
}

$flex-jc:(start:flex-start,
  end:flex-end,
  center:center,
  between:space-between,
  around:space-around,
);

$flex-ai:(start:flex-start,
  end:flex-end,
  center:center,
  stretch:stretch,
);

.flex-wrap {
  flex-wrap: wrap
}

.flex-grow-1 {
  flex-grow: 1;
}

//spacing
$spacing-types:(m:margin,
  p:padding,
);

$spacing-directions:(t:top,
  r:right,
  b:bottom,
  l:left,
);

$spacing-base-size:0.15rem;

$spacing-sizes:(0:0,
  1:0.25,
  2:0.5,
  3:1,
  4:1.5,
  5:3,
);



//button
.btn {
  height: .24rem;
  width: .6rem;
  border: none;
  border-radius: 0.025rem;
  line-height: .21rem;
  font-size: map-get($font-sizes, 'xs');

  &.btn-lg {
    display: flex;
    justify-content: center;
    align-items: center;

    i {
      color: map-get($colors, 'primary');
      font-weight: bold;
      font-size: 0.13rem;
      margin-right: 0.06rem;
    }

    background: map-get($colors, 'white-1');
    border: 1px solid map-get($colors, 'white-2');
    font-size: 0.13rem;
  }
}

//nav
.nav {
  display: flex;

  .nav-item {
    border-bottom: 3px solid transparent;

    &.active {
      color: map-get($colors, 'primary');
      border-bottom-color: map-get($colors, 'primary');
    }
  }

  &.nav-inverse {
    .nav-item {
      color: map-get($colors, 'white');

      &.active {
        border-bottom-color: map-get($colors, 'white');
      }
    }
  }
}

//sprite
.sprite {
  background: url(../assets/images/index.png) no-repeat 0 0;
  background-size: 375px 455px;
  display: inline-block;

  &.sprite-news {
    width: 25px;
    height: 25px;
    background-position: 63.546% 15.517%;
  }

  &.sprite-story {
    width: 25px;
    height: 25px;
    background-position: 90.483% 15.614%;
  }

  &.sprite-shop {
    width: 25px;
    height: 25px;
    background-position: 36.746% 0.924%;
  }

  &.sprite-experience {
    width: 25px;
    height: 25px;
    background-position: 10.408% 15.517%;
  }

  &.sprite-Newborn {
    width: 25px;
    height: 25px;
    background-position: 89.733% 1.266%;
  }

  &.sprite-inherit {
    width: 25px;
    height: 25px;
    background-position: 36.467% 15.287%;
  }

  &.sprite-Community {
    width: 25px;
    height: 25px;
    background-position: 9.728% 1.266%;
  }

  &.sprite-Camp {
    width: 25px;
    height: 25px;
    background-position: 63.3% 0.927%;
  }

  &.sprite-Public {
    width: 25px;
    height: 25px;
    background-position: 0 96.207%;
  }

  &.sprite-arrow {
    width: 10px;
    height: 10px;
    background-position: 38.577% 52.076%;
  }

  &.sprite-menu {
    width: 13px;
    height: 13px;
    background-position: 0.138% 50.452%;
  }

  &.sprite-menu1 {
    width: 18px;
    height: 3px;
    background-position: 47.619% 56.305%;
  }

  &.sprite-heroMenu {
    width: 12px;
    height: 13px;
    background-position: 46.768% 60.452%;
  }
}

//border

@each $dir in(top, bottom, right, left) {
  .border-#{$dir} {
    border-#{$dir}: 1px solid $border-color
  }
}
